<template>
<div id="father">
  <div id="son">
    <div id="tit" ><b><font style="color: #009688">E</font>-Parking</b></div>
    <div>
      <div class="class1">
       <div class="text1">UserName:</div><input type="text" class="input1" placeholder="Please input username" id="uname"/>
      </div>
      <div class="class1">
        <div class="text1">PassWord:</div><input type="text" class="input1" placeholder="Please input password" id="psw"/>
      </div>
      <div id="buttons">
        <input type="button" value="Login" id="login" v-on:click="verification()"/>
        <input type="button" value="Register" id="register" v-on:click="regist()"/>
      </div>
    </div>
  </div>

  <div class="wrap" style="float: left">
<!--    <a href="#modal-one" class="btn btn-big">模态框</a>-->
  </div>
  <div class="modal" id="modal-one" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header" style="text-align: center">
        <h2 style="color: brown">登录成功！</h2>
        <h2>选择你要登录的身份</h2>
<!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
      </div>
      <div class="modal-body">
        <div class="bigButtons1" v-on:click="choos(2)">
          <i class="el-icon-truck"></i>
          车主
        </div>
        <div class="bigButtons2" v-on:click="choos(1)">
          <i class="el-icon-office-building"></i>
          业主
        </div>
      </div>
      <div class="modal-footer">
        <a href="/#2-4" class="btn">返回</a>
      </div>
    </div>
  </div>
</div>
</template>


<script>
export default {
  name: "Login",
  data(){

  },
  methods:{
    verification() {
      var uname = $("#uname").val();
      var psw =$("#psw").val();
      if(uname!=undefined && psw!=undefined && uname!=null && psw!=null && uname!="" && psw!=""){
        this.logi();
      }else{
        alert("账号密码均不能为空");
      }

    },
    logi(){
      this.sa.ajax("/e-user/user/login",{
        "uaccount" : $("#uname").val(),
        "upass" :$("#psw").val(),
          },
      function (resp){
        if(resp.code==200){
          localStorage.setItem("token",resp.data.token);
          localStorage.setItem("role",resp.data.role);
         if(resp.data.role==0){
           this.moda();
         }else if(resp.data.role==1){
            alert("管理员登录成功");
         }else if(resp.data.role==4){
           alert("物业登录成功")
         }

        }else{
          alert("登录失败，请检查输入的账号与密码");
        }
      }.bind(this),
          {type : 'post'}
      )
    },

    moda(){
     window.location.href="#modal-one"
    },
    choos(num){
          if(num==1){
            this.getUserNum(2);
           // var tab = {id: 'Selection_Function', name: "功能选择界面", view: () => import('@/sa-view/login/Selection_Function.vue'), params: {id: 2-5}};
           //  this.sa_admin.showTab(tab);
            this.sa_admin.openRegister();
          }
          if(num==2){
         alert("车主登录成功");
          }
    },
    regist(){
      alert("p");
    },
    getUserNum(num){
      var i = localStorage.getItem("token")
      this.sa.ajax("/e-user/user/getUserNum/"+i+"/"+num,{},function (){

      }.bind(this),
          {type : 'post'}
      )
    }
  }
}

</script>

<style scoped>
#father{
  width: 100%;
  height: 669px;
  background-color: white;
}
#son{
  padding-top: 5%;
  width: 60%;
  margin-left: 20%;
  margin-top: 5%;
  height: 45%;
  background-color: white;
  float: left;
}
#tit{
  width: 58.5%;
  margin-left: 20%;
  margin-right: 24%;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-left:5px solid  #805322;
  border-right:5px solid  #805322;
  font-size: 200%;
  text-align: center;
}
.text1{
  float: left;
  font-size: 150%;
}
.class1{
  padding-top: 2%;
  padding-left: 20%;
  width: 60%;
  height: 30px;
}
.input1{
  float: right;
  font-size: 120%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  height: 80%;
  width: 70%;
  color: black;
}
#buttons{
  margin-top: 3%;
  height: 30%;
  width: 60%;
  padding-left: 20%;
  padding-right: 20%;
}
#login{
  font-size: 160%;
  background-color: green;
  color: white;
  border-radius: 15px;
  height: 40px;
  width: 35%;
  float: left;
}
#register{
  font-size: 160%;
  background-color: white;
  color: black;
  border-radius: 15px;
  height: 40px;
  width: 35%;
  float: right;
}


.wrap {
  padding: 40px;
  text-align: center;
}
.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 10px 20px;
  height: 200px;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
.bigButtons1{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: left;
  background-color: gray;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid  gray;
}
.bigButtons1:hover{
  border: 5px solid  #de9830;

}
.bigButtons2{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: right;
  background-color: #de9830;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid #de9830;
}
.bigButtons2:hover{
  border: 5px solid gray;
}
</style>

